import React, { Component } from 'react'
import {connect} from "react-redux"
import Echarts from 'echarts'
interface IProps{
    username:string
    title:string
    size:number
    endtime:string
    createtime:string
    selected:number
    select:Array<any>
    info?:string
    id:string
    setSize:(id:string,index:number)=>void
}

const options = {
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '100%',
            center: ['50%', '50%'],
            label: {
                position: 'inner'
            },
            data: [
                {value: 335,},
                {value: 310,},
                {value: 234},
                {value: 135},
                {value: 1548}
            ],
            labelLine: {
                normal: {
                    show: false
                }
            }
        }
    ]
};

 class Item extends Component<IProps> {
    public canvas:any=null
    render() {
        let {username,title,size,endtime,createtime,selected,select,info,id} = this.props
        // console.log(endtime,id)
        return (
            <div className="item">
               <p>创建人：{username} 创建时间：{endtime}</p>
               <p>标题：{title}</p>
               <div className="item-content">
                    {
                        select.map((item:any,index:number)=>{
                            return (
                            <li key={index} onClick={()=>{this.setSize(id,index)}}>{item.title} <b>{item.size}</b> </li>
                            )
                        })
                    }
               </div>
               <div style={{
                    width:'100px',
                    height:'100px'
                }} ref="canvas">

                </div>
            </div>
        )
    }
    setSize=(id:string,index:number)=>{
        this.props.setSize(id,index)
        setTimeout(()=>{
            const canvasDom=this.refs.canvas
            this.canvas = Echarts.init(canvasDom as HTMLDivElement);
            options.series[0].data=this.props.select.filter((item:any)=>item.size>0).map(item=>({value:item.size,name:item.title}))
            this.canvas.setOption(options);
        })
       
    }
    componentDidMount(){
        const canvasDom=this.refs.canvas
        this.canvas = Echarts.init(canvasDom as HTMLDivElement);
        options.series[0].data=this.props.select.filter((item:any)=>item.size>0).map(item=>({value:item.size,name:item.title}))
        this.canvas.setOption(options);
    }
}
export default connect(
    (state:any)=>{
        return {

        }
    },
    (dispatch:any)=>{
        return {
            setSize(id:string,index:number){
                dispatch({type:"SETSIZE",id,index})
            }
        }
    }
)(Item)